<template>
	<!-- 导航 -->
	<div class="bigImgDetail">
		<div class="bigImgDetail-left">
			<div class="bigPic">
				<div class="bigImg-box  img_box">
					<span class="left_arrow" @click="next(-1)"></span>
					<img class="bigImg img_pic" :src="getImgPath(bigSrc)" />
					<span class="right_arrow" @click="next(1)"></span>
				</div>
			</div>
			<div class="bigPic_title">
				<p class="title">{{ title }}</p>
				<div class="action_infos">
					<div class="action_infos_left">
						<span class="span_info">{{ detailInfo?.publishTime }}</span>
						<span class="span_info">来源：{{}}</span>
						<span class="span_info">作者：{{}}</span>
					</div>
					<div class="comment_zan_store">
						<span class="zan span" @click="actions(1)">
							<i class="iconfont icon-Thumbs-up" :class="isUp ? 'activeAction' : ''"></i>
							<span class="comment_zan_store_number" :class="isUp ? 'activeAction comment_zan_store_number' : 'comment_zan_store_number'">{{ isUp ? '已点赞' : '赞' }}</span>
						</span>
						<span class="store span" @click="actions(3)">
							<i class="iconfont icon-Star" :class="isFavorite ? 'activeAction' : ''"></i>
							<span class="comment_zan_store_number" :class="isFavorite ? 'activeAction comment_zan_store_number' : 'comment_zan_store_number'">
								{{ isFavorite ? '已收藏' : '收藏' }}
							</span>
						</span>
						<el-popover placement="top-start" popper-style="background: #FFFFFF;">
							<template #reference>
								<span class="comment share span">
									<i class="iconfont icon-Share-two"></i>
									<span class="comment_zan_store_number">分享</span>
								</span>
							</template>
							<template #default>
								<share></share>
							</template>
						</el-popover>
					</div>
				</div>
			</div>
			<div class="see-end-main" v-show="isShowRec">
				<div class="see-end-tit">
					<div style="display: flex;">
						<span class="see-end-title2">
							<i class="iconfont icon-complete"></i>
							该图集已到底！
						</span>
						<span class="see-end-title3" @click="isShowRec = false" style="margin-left: 34px; ">
							<i class="iconfont icon-Redo"></i>
							<span>重新浏览</span>
						</span>
					</div>
					<div class="goHome"><a :href="rootPath">返回图片首页</a></div>
				</div>
				<!--    图片列表    -->
				<div class="allList">
					<div class="everSee_left">
						<div class="everSee clearfix"><div class="everSee-all">推荐图集</div></div>
						<div class="hot_pic">
							<div class="hot_pic_item" v-for="item in recommondList">
								<a class="block_a" :href="Path + item?.url" target="_blank">
									<div class="img_box"><img class="hot_img_box img_pic" :src="getImgPath(item.headImag)" /></div>
									<h5 class="title_description p_descripte">{{ item.title }}</h5>
								</a>
							</div>
						</div>
					</div>
					<div class="everSee_right">
						<div class="hot_pic_item">
							<a class="block_a" :href="Path + constentprevList?.url" target="_blank" v-if="constentprevList.id">
								<div class="img_box"><img class="hot_img_box img_pic" :src="getImgPath(constentprevList.headImag)" /></div>
								<h6 class="title_description p_descripte" style='display: flex;align-items: center;height: 22px;'>
									<i class="iconfont icon-Arrow-circle-left"></i>
									<span class="visitor">上一图集</span>
								</h6>
							</a>
							<a class="block_a" target="_blank" v-else>
								<div class="img_box"><img class="hot_img_box img_pic" :src="getImgPath(constentprevList.headImag)" /></div>
								<h6
									style="color:#999;font-size: 16px;font-weight: 500; display: flex;height: 22px;align-items: center;"
								>
									<i class="iconfont icon-Arrow-circle-left"></i>
									<span style="margin-left:8px">没有上一图集了！</span>
								</h6>
							</a>
						</div>
						<div class="hot_pic_item">
							<a class="block_a" :href="Path + constentNextList?.url" target="_blank" v-if="constentNextList.id">
								<div class="img_box"><img class="hot_img_box img_pic" :src="getImgPath(constentNextList.headImag)" /></div>
								<h6 class="title_description p_descripte" style='display: flex;align-items: center;height: 22px;'>
									<i class="iconfont icon-Arrow-circle-right"></i>
									<span class="visitor">下一图集</span>
								</h6>
							</a>
							<a class="block_a" target="_blank" v-else>
								<div class="img_box"><img class="hot_img_box img_pic" :src="getImgPath(constentNextList.headImag)" /></div>
								<h6
									style="color:#999;font-size: 16px;font-weight: 500; display: flex;height: 22px;align-items: center;"
								>
									<i class="iconfont icon-Arrow-circle-right"></i>
									<span style="margin-left:8px">没有下一图集了！</span>
								</h6>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bigImgDetail-right">
			<div>
				<div class="smallImg-box_container">
					<div
						class="smallImg-box img_box"
						:class="ActiveIN == index ? 'maskNone' : ''"
						v-for="(item, index) in contentDetail.value?.length > 12 ? contentDetail.value.slice((currentPage - 1) * 12, currentPage * 12) : contentDetail.value"
						@mouseenter="hoverrouterNav(item, index)"
					>
						<img class="smallImg img_pic" :src="getImgPath(item.url)" />
						<div class="mask"></div>
					</div>
				</div>
				<div class="pic_pagenation" v-if="contentDetail.value?.length > 12">
					<div>
						<el-pagination small background layout="pager" :total="contentDetail.value.length" class="mt-4" 
							v-model:current-page="currentPage" 
							@current-change='changePage'
							:default-page-size="12" />
						</div>
				</div>
				<div class="currentPage" v-if="contentDetail.value?.length" :class='!description?"marginBottom60":""'>
					<span class="currentPages">{{ (currentPage - 1) * 12 +( ActiveIN + 1) }}</span>
					/{{ contentDetail.value?.length }}
				</div>
				<div class="car-description" v-if="contentDetail.value?.length && description">{{ description }}</div>
				<hotPics :title="hotPics" style="padding:0 8px;"></hotPics>
			</div>

			<div class="commentmodel" :class="isComment ? 'rightBoxVisible' : 'rightBoxHidden'" :style="{ width: width + 'px' }">
				<comment :type="'video'" @closeClick="closeClick" @getTotal="getTotal"></comment>
			</div>
		</div>
	</div>
	<div class="mask" v-if="isShowRec" @click="isShowRec = false"></div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
//import hotPics from './hotPics.vue';

export default {
	props: ['router'],
	components: {
		hotPics: defineAsyncComponent(() => import(rootPath + '/src/components/imgChannelDetail/hotPics.vue')),
		share: defineAsyncComponent(() => import(rootPath + '/src/components/footer/share.vue')),
		comment: defineAsyncComponent(() => import(rootPath + '/src/components/comment/comment.vue'))
	},
	data() {
		return {
			bigSrc: '',
			ActiveIN: 0,
			totalPage: 20,
			description: '',
			title: '',
			contentDetail: { value: [] },
			detailInfo: {},
			isUp: '', // 查看是否点赞；
			query: GetQueryString(),
			Path: getRootPath(),
			isFavorite: '', //是否收藏
			hotPics: '热门图集',
			constentNextList: {}, //内容下一页
			constentprevList: {}, //内容上一页
			isShowRec: '',
			currentPage: 1,
			isComment: false,
			width: 380,
			total: 0,
			rootPath:'',
		};
	},
	created() {
		this.getContentOfChannel();
		this.getIsUp();
		this.getRecommened();
		this.contentNext();
		this.commentSetUp();
		this.rootPath = location.origin;
	},
	mounted() {},
	methods: {
		hoverrouterNav(item, index) {
			this.ActiveIN = index;
			this.description = item.description;
			this.bigSrc = item.url;
		},
		getContentOfChannel() {
			let param = {
				id: this.query.id
			};
			contentApi.getContentDetail(param, res => {
				if (res.code == '00000 00000') {
					this.detailInfo = res.data || {};
					this.title = res.data.title;
					this.contentDetail = res.data.instance.instanceItems.filter(item => item.field == 'multiImgUploadNcb2')[0] || {};
					this.$nextTick(() => {
						this.bigSrc = this.contentDetail.value[this.ActiveIN].url;
						this.$emit('getRouters', res.data.frontChannelLevelVos);
						this.description = this.contentDetail.value[this.ActiveIN].description;
					});
				} else {
				}
			});
		},
		setNumber(val) {
			return SetNumber(val);
		},
		getIsUp() {
			let param = {
				id: this.query.id
			};
			contentApi.getIsUp(param, res => {
				if (res.code == '00000 00000') {
					this.isUp = res.data;
				} else {
				}
			});
		},
		actions(index) {
			if (index == 1) {
				contentApi[this.isUp ? 'contentUnLikes' : 'contentLikes']({ id: this.query.id }, res => {
					if (res.code == '00000 00000') {
						this.isUp = !this.isUp;
					}
				});
			} else if (index == 3) {
				contentApi[this.isFavorite ? 'removeFavorite' : 'addFavorite']({ id: this.query.id }, res => {
					if (res.code == '00000 00000') {
						this.isFavorite = !this.isFavorite;
					}
				});
			}
		},
		next(type) {
			let endPage = (this.currentPage - 1) * 12 + this.ActiveIN + 1;
			let arr = this.contentDetail.value.slice((this.currentPage - 1) * 12, this.currentPage * 12);
			if (this.ActiveIN + type < 0) {
				this.ActiveIN = arr.length - 1;
				this.isShowRec = false;
			} else if (this.ActiveIN + type > arr.length - 1) {
				if (endPage >= this.contentDetail.value.length - 1) {
					this.isShowRec = true;
					this.ActiveIN = 0;
					this.currentPage = 1;
				} else {
					this.isShowRec = false;
					this.ActiveIN = 0;
				}
			} else {
				this.ActiveIN += type;
				this.isShowRec = false;
			}
			this.bigSrc = arr[this.ActiveIN].url;
			this.description = arr[this.ActiveIN].description;
		},
		getRecommened() {
			let param = {
				pageNum: 1,
				pageSize: 6,
				typeIdStr: 1301
			};
			contentApi.fetchContentOfChannel(param, res => {
				if (res.code == '00000 00000') {
					this.recommondList = res.data.records;
				} else {
				}
			});
		},
		contentNext() {
			[false, true].forEach((item, index) => {
				contentApi.contentNext({ contentId: this.query.id, isNext: item }, res => {
					if (res.code == '00000 00000') {
						if (res.data) {
							if (!item) {
								this.constentprevList.id = res.data.id;
								this.constentprevList.url = res.data.url;
								this.constentprevList.headImag = '';
								let url = res.data.instance.instanceItems.find(item => item.field == 'headImg')?.value || '';
								if (url && url.length) {
									this.constentprevList.headImag = url[0].url;
								}
							} else {
								this.constentNextList.id = res.data.id;
								this.constentNextList.url = res.data.url;
								this.constentNextList.headImag = '';
								let url = res.data.instance.instanceItems.find(item => item.field == 'headImg')?.value || '';
								if (url && url.length) {
									this.constentNextList.headImag = url[0].url;
								}
							}
						}
					}
				});
			});
		},
		getImgPath(url) {
			return imgPath(url);
		},
		closeClick() {
			this.isComment = false;
		},
		commentSetUp() {
			// 评论设置
			contentApi.commentSetUp({}, res => {
				if (res.code == '00000 00000') {
					sessionStorage.commentAllowedLink = res.data.commentAllowedLink;
					sessionStorage.commentSet = res.data.commentSet; //1 评论不限制，2 登陆后评论，3 不允许评论；
				} else {
				}
			});
		},
		getContentComments() {
			// 获取内容评论数
			let param = {
				contentId: this.query.id,
				pageNumber: 1,
				pageSize: 1
			};
			contentApi.contentCommentList(param, res => {
				if (res.code == '00000 00000') {
					this.total = res.data.total;
				} else {
				}
			});
		},
		getTotal(val) {
			// 获取总评论数
			this.total = val;
		},
		changePage(){
			this.ActiveIN = 0;
			this.bigSrc = this.contentDetail.value[(this.currentPage - 1) * 12 + this.ActiveIN].url;
			this.description = this.contentDetail.value[(this.currentPage - 1) * 12 + this.ActiveIN].description;
		}
	}
};
</script>

<style scoped="scoped">
.bigImgDetail {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	height: calc(100% - 40px);
}
.bigImgDetail .bigImgDetail-left {
	background: #0d0d0d;
	position: relative;
	flex: 1;
}
.bigImgDetail .bigImgDetail-left .bigPic {
	padding: 78px 70px;
	box-sizing: border-box;
	height: calc(100% - 96px);
	min-height: 288px;
	box-sizing: border-box;
}
.bigImgDetail .bigImgDetail-left .bigPic .bigImg-box {
	width: 100%;
	height: 100%;
	position: relative;
}
.bigImgDetail .bigImgDetail-left .bigPic .bigImg-box .left_arrow,
.bigImgDetail .bigImgDetail-left .bigPic .bigImg-box .right_arrow {
	position: absolute;
	width: 50%;
	height: 100%;
	background-color: transparent;
	z-index: 1;
	display: flex;
	align-items: center;
}
.bigImgDetail .bigImgDetail-left .bigPic .bigImg-box .left_arrow {
	cursor: url(//icon.zol.com.cn/article/slide2017/cursor_left.cur), auto;
}
.bigImgDetail .bigImgDetail-left .bigPic .bigImg-box .right_arrow {
	cursor: url(//icon.zol.com.cn/article/slide2017/cursor_right.cur), auto;
}
.bigImgDetail .bigImgDetail-left .bigPic .bigImg-box .left_arrow {
	left: 0px;
}
.bigImgDetail .bigImgDetail-left .bigPic .bigImg-box .right_arrow {
	right: 0px;
	justify-content: flex-end;
}
.bigImgDetail .bigImgDetail-left .bigPic_title {
	height: 96px;
	width: 100%;
	padding: 0 24px;
	box-sizing: border-box;
}
.bigImgDetail .bigImgDetail-left .bigPic_title .title {
	font-size: 24px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #e8e8e8;
	line-height: 32px;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
}
.bigImgDetail .bigImgDetail-left .bigPic_title .action_infos {
	cursor: pointer;
	width: 100%;
	display: flex;
	font-size: 14px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
	line-height: 14px;
	margin-top: 26px;
}
.bigImgDetail .bigImgDetail-left .bigPic_title .action_infos .action_infos_left {
	flex: 1;
	display: flex;
}
.bigImgDetail .bigImgDetail-left .bigPic_title .action_infos .action_infos_left .span_info {
	margin-right: 40px;
}
.bigImgDetail .bigImgDetail-left .bigPic_title .action_infos .comment_zan_store {
	width: 350px;
	display: flex;
	justify-content: flex-end;
	height: 14px;
}
.bigImgDetail .bigImgDetail-left .bigPic_title .action_infos .comment_zan_store .span {
	margin-left: 30px;
}
.bigImgDetail .bigImgDetail-left .bigPic_title .action_infos .comment_zan_store .span .comment_zan_store_number {
	margin-left: 8px;
	font-size: 14px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #e8e8e8;
	line-height: 14px;
}
.bigImgDetail .bigImgDetail-left .bigPic_title .action_infos .comment_zan_store .iconfont {
	cursor: pointer;
	font-size: 14px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #e8e8e8;
	line-height: 14px;
}
.bigImgDetail .bigImgDetail-right {
	width: 380px;
	background: #222222;
	padding: 24px 16px;
	box-sizing: border-box;
	overflow-y: auto;
}
.bigImgDetail .bigImgDetail-right .smallImg-box_container {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}
.bigImgDetail .bigImgDetail-right .smallImg-box_container .smallImg-box {
	width: 82px;
	height: 45px !important;
	margin-right: 6px;
	margin-bottom: 6px;
	position: relative;
}
.bigImgDetail .bigImgDetail-right .smallImg-box_container .smallImg-box:nth-of-type(4n) {
	margin-right: 0px;
}
.bigImgDetail .bigImgDetail-right .smallImg-box_container .smallImg-box .smallImg {
	width: 100%;
	height: 100%;
}
.bigImgDetail .bigImgDetail-right .smallImg-box_container .smallImg-box .mask {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #222;
	opacity: 0.5;
}
.bigImgDetail .bigImgDetail-right .smallImg-box_container .maskNone .mask {
	display: none;
}
.bigImgDetail .bigImgDetail-right .pic_pagenation {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	margin-top: 14px;
	padding: 0 4px;
}
.bigImgDetail .bigImgDetail-right .pic_pagenation .smallImg-box:nth-of-type(3n) {
	margin-right: 0;
}
.bigImgDetail .bigImgDetail-right .pic_pagenation .btn_span_box {
	display: flex;
	flex-wrap: wrap;
}
.bigImgDetail .bigImgDetail-right .pic_pagenation .btn_span_box .btn_span {
	border-radius: 4px;
	padding: 2px 8px;
	font-size: 14px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #e8e8e8;
	line-height: 22px;
	display: inline-block;
	text-align: center;
	cursor: pointer;
}
.bigImgDetail .bigImgDetail-right .pic_pagenation .btn_span_box .btn-aa {
	background: #ff3333;
}
.bigImgDetail .bigImgDetail-right .currentPage {
	font-size: 18px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #e8e8e8;
	line-height: 18px;
	padding: 0 8px;
	margin-top: 32px;
}
.bigImgDetail .bigImgDetail-right .marginBottom60{
	margin-bottom: 60px;
}

.bigImgDetail .bigImgDetail-right .currentPage .currentPages {
	font-size: 30px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #ff3333;
	line-height: 32px;
}
.bigImgDetail .bigImgDetail-right .car-description {
	width: 100%;
	height: 110px;
	display: -webkit-box;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	font-size: 16px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #e8e8e8;
	line-height: 28px;
	margin-top: 12px;
	text-indent: 36px;
	margin-bottom: 60px;
	padding: 0 8px;
	box-sizing: border-box;
}
.bigImgDetail .see-end-main {
	width: 808px;
	height: 480px;
	margin: 0 auto;
	padding: 24px;
	background-color: #333;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	z-index: 2;
	border-radius: 4px;
	box-sizing: border-box;
}
.bigImgDetail .see-end-tit {
	padding-bottom: 24px;
	border-bottom: 1px solid #222222;
	height: 16px;
	font-size: 16px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #e8e8e8;
	line-height: 16px;
	display: flex;
	justify-content: space-between;
}
.bigImgDetail .see-end-tit .see-end-title2 .iconfont {
	color: #3ace72;
	margin-right: 8px;
	font-size: 20px;
}
.bigImgDetail .see-end-tit .see-end-title3,
.bigImgDetail .see-end-tit .see-end-title2 {
	display: flex;
	align-items: center;
	height: 20px;
	line-height: 20px;
}
.bigImgDetail .see-end-tit .goHome {
	width: 116px;
	height: 32px;
	background: #ff3333;
	border-radius: 4px 4px 4px 4px;
	line-height: 32px;
	text-align: center;
	font-size: 14px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
	cursor: pointer;
	margin-top: -8px;
}
.bigImgDetail .see-end-tit .goHome a{
	color:#fff;
}
.bigImgDetail .see-end-tit .goHome:hover {
	background: #ff4747;
}
.bigImgDetail .see-end-tit .goHome:active {
	background: #f23030;
}
.bigImgDetail .see-end-tit .see-end-title3 .iconfont {
	margin-right: 8px;
	font-size: 20px;
}
.bigImgDetail .see-end-tit .see-end-title3 span:hover {
	text-decoration: underline;
}
.bigImgDetail .everSee {
	font-size: 18px;
	color: #fff;
}
.bigImgDetail .allList {
	display: flex;
	height: calc(100% - 64px);
}
.bigImgDetail .everSee_left {
	flex: 1;
}
.bigImgDetail .everSee_right {
	width: 198px;
	margin-top: 24px;
	padding: 40px 24px 46px 40px;
	box-sizing: border-box;
	height: 100%;
	border-left: 1px solid #222222;
	box-sizing: border-box;
}
.bigImgDetail .everSee_right .visitor {
	margin-left: 8px;
}
.bigImgDetail .everSee_right .visitor:hover {
	border-bottom: 1px solid #e8e8e8;
}
.bigImgDetail .everSee-all {
	font-size: 16px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #e8e8e8;
	line-height: 16px;
	padding: 24px 0;
}
.bigImgDetail .hot_pic {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.bigImgDetail .hot_pic_item {
	margin-right: 24px;
	margin-bottom: 24px;
	width: 158px;
}
.bigImgDetail .hot_pic_item .img_box {
	width: 100%;
	height: 89px;
	margin-bottom: 16px;
	border-radius: 2px;
	overflow: hidden;
}
.bigImgDetail .hot_pic_item .img_box .hot_img_box {
	width: 100%;
	height: 100%;
}
.bigImgDetail .hot_pic_item .img_box .hot_img_box:hover {
	transform: scale(1.05);
}
.bigImgDetail .hot_pic_item .title_description {
	font-size: 14px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #e8e8e8;
	line-height: 22px;
	display: -webkit-box;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.bigImgDetail .hot_pic_item .iconfont {
	font-size: 20px;
}
.bigImgDetail .hot_pic_item h5.title_description:hover {
	text-decoration: underline;
}
.bigImgDetail .hot_pic_item:nth-of-type(3n) {
	margin-right: 0;
}
.mask {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}
.bigImgDetail .bigImgDetail-left .bigPic_title .action_infos .comment_zan_store .activeAction {
	color: #ff3333 !important;
}
.commentmodel {
	position: absolute;
	right: 0;
	top: 0;
	background: #222;
	width: 380px;
	box-sizing: border-box;
	height: calc(100%);
	padding: 24px;
	transition: right 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	z-index: 10;
}
.rightBoxVisible {
	right: 0px;
}
.rightBoxHidden {
	right: -400px;
}
.commentmodel .commentTitle {
	color: #e8e8e8;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40px;
}
.commentmodel .commentTitle .commentTitleLeft {
	height: 20px;
	font-size: 20px;
	font-weight: 500;
	color: #e8e8e8;
	line-height: 20px;
}
.commentmodel .commentTitle .iconfont {
	font-size: 24px;
}
</style>
<style>
#app .pic_pagenation .el-pagination.is-background .el-pager li {
	width: 22px;
	height: 22px;
	border: none;
	background: transparent;
	color: #e8e8e8;
}
#app .pic_pagenation .el-pagination.is-background .el-pager li:hover {
	width: 22px;
	height: 22px;
	border: none;
	background: transparent;
	color: #e8e8e8;
}

</style>
